Understanding translateX() and translateY() in CSS
Both translateX() and translateY() are CSS transform functions used to move an element along a single axis without affecting the document flow. They help reposition elements smoothly and are often used in animations and transitions.
translateX(value)— moves the element horizontally along the X-axis. Positive values move it to the right, negative values move it to the left.translateY(value)— moves the element vertically along the Y-axis. Positive values move it downward, negative values move it upward.
In this example, .move-x shifts the box 80px to the right, while .move-y moves it 50px upward. The movement is animated smoothly with the transition property.
Use
translateX()andtranslateY()instead ofleftortopfor smoother, GPU-accelerated animations.Combine both with
translate(x, y)when moving elements diagonally.Pair with
transitionfor interactive hover or click effects.
Here, the card shifts diagonally when hovered, combining both X and Y translations for a smooth, engaging motion.